<%@page import="java.util.Date"%>
<%@page import="java.util.Random"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 响应式 -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引进Bootstrap样式 -->
<link href="lib/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- 引进自己的样式 -->
<link href="css/style.css" rel="stylesheet">
<!-- 引进jQuery -->
<script type="text/javascript" src="lib/jquery/3.3.1/jquery.min.js"></script>
<!-- 引进Popper提示插件 -->
<script type="text/javascript" src="lib/popper/1.14.3/popper.min.js"></script>
<!-- 引进Bootstrap JS -->
<script type="text/javascript"
	src="lib/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>我的博客</title>
</head>
<body>
	<div class="container-fluid">
		<div class="row blog-head">
			<div class="col blog-head-image"></div>
		</div>
		<div class="row bg-light">
			<div class="col-sm-9 offset-sm-1 col-md-8 offset-md-2"
				style="padding: 0px;">
				<nav class="navbar navbar-expand-sm navbar-light bg-light">
					<a class="navbar-brand" href="index.jsp">My Blog</a>
					<button class="navbar-toggler d-lg-none" type="button"
						data-toggle="collapse" data-target="#collapsibleNavId"
						aria-controls="collapsibleNavId" aria-expanded="false"
						aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="collapsibleNavId"
						style="padding-left: 80px;">
						<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
							<li class="nav-item active"><a class="nav-link" href="#">博文
									<span class="sr-only">(current)</span>
							</a></li>
							<li class="nav-item"><a class="nav-link" href="#">相册</a></li>
							<li class="nav-item"><a class="nav-link" href="#">关于我...</a>
						</ul>
						<form class="form-inline my-2 my-lg-0">
							<input class="form-control mr-sm-2" type="text"
								placeholder="关键字...">
							<button class="btn btn-outline-success my-2 my-sm-0"
								type="submit">搜索</button>
						</form>
					</div>
				</nav>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-8">
				<%-- 博文列表 --%>
				<%-- JSP页面上输出内容：1.全Java代码输出 2.代码与HTML标签混合 --%>

				<%-- 输出10篇文章 --%>
				<%
					//从数据库中读取最近10篇文章
					//JDBC编程
					//加载数据库驱动类
					Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
					//数据库JDBC连接串
					String url = "jdbc:sqlserver://localhost:1433;databaseName=MyBlog";
					//通过驱动管理器获取数据库连接对象
					Connection connection = DriverManager.getConnection(url, "sa", "");
					//通过数据库连接对象创建语句
					Statement state = connection.createStatement();
					//执行查询语句,返回结果集
					ResultSet result = state.executeQuery(
							"SELECT TOP 10 title,content,creationTime,releaseTime FROM Article ORDER BY releaseTime DESC");
					String content;
					Random r = new Random();
					//循环读取数据进行业务处理
					while (result.next()) {
						content = result.getString("content");
						content = content.substring(0, r.nextInt(content.length()));
				%>
				<br />
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">
							<a href="http://www.baidu.com" target="_blank"><%=result.getString("title")%></a>&nbsp;<span
								style="color: red;"><%=result.getDate("creationTime")%></span>
						</h5>
						<p class="card-text"><%=content%>...
						</p>
						<a href="#" class="btn btn-primary">阅读全文</a>
					</div>
				</div>
				<%
					}
					result.close();
					state.close();
					connection.close();
				%>
			</div>
			<div class="col-sm-4">
				<%-- 博文分类标签 --%>
				<br/>
				<ul class="list-group">
					<li
						class="list-group-item d-flex justify-content-between align-items-center">
						Cras justo odio <span class="badge badge-primary badge-pill">14</span>
					</li>
					<li
						class="list-group-item d-flex justify-content-between align-items-center">
						Dapibus ac facilisis in <span
						class="badge badge-primary badge-pill">2</span>
					</li>
					<li
						class="list-group-item d-flex justify-content-between align-items-center">
						Morbi leo risus <span class="badge badge-primary badge-pill">1</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="row" style="margin: 20px 0px;">
			<div class="col">
				<p class="text-center">&copy;2018&nbsp;&nbsp;&nbsp;重庆信息技术职业学院&nbsp;&nbsp;&nbsp;软件学院&nbsp;&nbsp;&nbsp;软件开发教研室&nbsp;&nbsp;&nbsp;唐礼飞</p>
			</div>
		</div>
	</div>
</body>
</html>